<template>
  <div>
    <view class="c-relative">
      <image
        :class="item.productList.length > 0 ? 'da' : 'xiao'"
        :src="item.productList.length > 0 ? '/static/image/youhuiquan.png' : '/static/image/youhuiquanxiao.png'"
      />
      <view
        v-if="!(item.productList.length > 0)"
        class="c-absolute c-flex"
        :class="item.productList.length > 0 ? 'daBox' : 'xiaoBox'"
      >
        <view class="price">
          <text v-if="item.discountType == 2" class="color-main c-fs-26">￥</text
          ><text v-if="item.discountType == 2" class="c-fs-32 color-main">{{ item.discountValue }}</text>
          <text v-if="item.discountType == 1" class="c-fs-32 color-main">{{ item.discountValue * 10 }}</text
          ><text v-if="item.discountType == 1" class="color-main c-fs-26">折</text>

          <text class="c-FA c-ml10 c-fs-26">满{{ item.minPrice }}元可用</text>
          <text class="c-fw600 c-color-222 c-fs-26 c-ml20">
            {{ keyong ? '当前商品可用' : '全场可用' }}
          </text>
        </view>

        <view class="c-absolute lingqu">
          <button
            @click="ling(item.id, item.userCouponId, item.discountType, item.discountValue)"
            v-if="clickBtn.indexOf(filterBtn()) !== -1"
            class="click"
          >
            {{ filterBtn() }}
          </button>
          <button v-if="noClickBtn.indexOf(filterBtn()) !== -1" class="noclick">{{ filterBtn() }}</button>
        </view>
      </view>
      <view class="dayou c-flex c-flex-between" v-else>
        <view class="c-w70">
          <view class="c-fs-24 c-fw600">限活动商品使用</view>
          <view class="goodsBox">
            <view class="scroll">
              <view :style="{width: item.wNum + '%'}">
                <GoodList
                  :data="item.productList"
                  :col="item.scrollCol"
                  keys="id"
                  mainTitleValue="effectList"
                  bgimg="pic"
                  :iconimgBoo="false"
                  viceTitleValue="name"
                  moneyValue="price"
                  :pageView="true"
                  shoppingNum="sale"
                  :shopping="false"
                  :view="false"
                  viewNum="look"
                  moneySymbol="￥"
                  @navTo="navTo"
                />
              </view>
            </view>
          </view>
        </view>
        <view class="c-w22">
          <view class="c-text-center c-mt60">
            <text v-if="item.discountType == 2" class="color-main c-fs-26">￥</text
            ><text v-if="item.discountType == 2" class="c-fs-32 color-main">{{ item.discountValue }}</text>
            <text v-if="item.discountType == 1" class="c-fs-32 color-main">{{ item.discountValue * 10 }}</text
            ><text v-if="item.discountType == 1" class="color-main c-fs-26">折</text>
          </view>
          <view class="c-FA c-mt30 c-fs-20 c-text-center">满{{ item.minPrice }}元可用</view>
          <view class="lingqu c-mt30">
            <button
              @click="ling(item.id, item.userCouponId, item.discountType, item.discountValue)"
              v-if="clickBtn.indexOf(filterBtn()) !== -1"
              class="click"
            >
              {{ filterBtn() }}
            </button>
            <button v-if="noClickBtn.indexOf(filterBtn()) !== -1" class="noclick">{{ filterBtn() }}</button>
          </view>
        </view>
      </view>
    </view>
  </div>
</template>
<script>
  import GoodList from '@/commponents/public/goodsList'

  export default {
    components: {GoodList},

    props: ['item', 'type', 'index', 'keyong'],
    data() {
      return {
        active: 'all',
        clickBtn: ['立即领取', '立即使用'],
        noClickBtn: ['已使用', '已过期']
      }
    },
    methods: {
      choose(type) {
        this.active = type
      },
      ling(id, userCouponId, discountType, discountValue) {
        if (this.keyong) {
          this.$emit('ling', {
            id,
            userCouponId,
            discountType,
            discountValue
          })
        } else {
          this.$emit('ling', id)
        }
      },
      filterBtn() {
        if (!this.type) {
          return '立即领取'
        } else if (this.type == 'use') {
          if (this.index == 1) {
            return '立即使用'
          } else if (this.index == 2) {
            return '已使用'
          } else if (this.index == 3) {
            return '已过期'
          }
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .c-flex {
    display: flex;
  }
  .c-w70 {
    width: 70%;
  }
  .c-flex-between {
    justify-content: space-between;
  }
  .c-p15 {
    padding: 30rpx;
  }
  .goodsBox {
    width: 100%;
  }
  .c-mr10 {
    margin-right: 10rpx;
  }
  .mt15 {
    margin-top: 15px;
  }
  .c-fs-20 {
    font-size: 20rpx;
  }
  .xiao {
    width: 100%;
    height: 200rpx;
  }
  .lingqu {
    right: 10px;
    top: 35px;
    button {
      width: 153rpx;
      font-size: 12px;
      padding: 0;
      margin: 0;
      border: 0;
      color: #fff;
      border-radius: 80px;
    }
    .click {
      background-color: #ff6a21;
    }
    .noclick {
      background-color: #d6dcea;
    }
  }
  .youBox {
    width: 80%;
    margin: 70rpx auto;
  }
  .da {
    width: 100%;
    height: 390rpx;
  }
  .xiaoBox {
    top: 0px;
    width: 100%;
    height: 200rpx;
    line-height: 170rpx;
    padding-left: 22px;
    box-sizing: border-box;
    padding-right: 10px;
  }
  .daBox {
    top: 0px;
    width: 100%;
    background: gray;
    height: 390rpx;
    padding-left: 10px;
    box-sizing: border-box;
    padding-right: 10px;
  }
  .dayou {
    position: absolute;
    top: 20rpx;
    left: 20rpx;
    height: 345rpx;
    width: 94%;
  }
  .quanbox {
    width: 258rpx;
    height: 60rpx;
    text-align: center;
    background: #eee;
    line-height: 60rpx;
    font-size: 13px;
    border-radius: 3px;
  }
  .scroll {
    width: 100%;
    overflow: auto;
  }
  .c-w22 {
    width: 22%;
  }
</style>
